<template>
  <div class="search-container">
    <div class="search-header-container">
      <div class="search-logo">
        <a href="#">
          <img src="../../assets/images/search/logo-black.png" />
        </a>
      </div>
      <div class="search-user">
        <a href="#">
          <img src="../../assets/images/search/no-login.png" />
        </a>
      </div>
    </div>
    <div class="search-main-container">
      <div class="search-main-header">
        <div class="search-main-search">
          <input type="text" />
          <p>
            <i class="iconfont icon-sousuo"></i>
            <span>搜索</span>
          </p>
        </div>
        <div class="search-main-hot">
          <span>搜索发现：</span>
          <a href="#">李玉刚·一场烟雨</a>
          <a href="#">信·明天</a>
          <a href="#">红梅赞</a>
          <a href="#">周生如故</a>
          <a href="#">孙楠</a>
          <a href="#">吴克群</a>
        </div>
      </div>
      <div class="search-main">
        <div class="search-result">
          <div class="search-best-show">
            <p>你可能感兴趣</p>
            <div class="best-show-content">
              <div class="best-show-mv">
                <a href="#">
                  <img
                    src="//cdnmusic.migu.cn/picture/mv/1v5/ch/1f09a599a49c5903755a6bb7000c9aee.jpg"
                  />
                </a>
                <div class="best-show-text">
                  <span>MV</span>
                  <div class="best-show-name">
                    <a href="#">流行音乐指北张国荣</a>
                  </div>
                  <div class="best-show-desc">
                    <a href="#">流行音乐指北</a>
                  </div>
                </div>
              </div>
              <div class="best-show-singer">
                <a class="best-show-image">
                  <img
                    src="//cdnmusic.migu.cn/picture/2021/0226/1718/ARTM803c4548afcf99c0ee7a7dc92a946d5b.jpg"
                  />
                </a>
                <div class="best-show-text">
                  <div class="best-show-name">
                    <a href="#">张国荣</a>
                  </div>
                  <div class="best-show-desc">
                    <a href="#"
                      ><span>歌曲&nbsp;&nbsp;</span
                      ><span class="best-show-num">316</span></a
                    >
                    <a href="#"
                      ><span>专辑&nbsp;&nbsp;</span
                      ><span class="best-show-num">79</span></a
                    >
                    <a href="#"
                      ><span>MV&nbsp;&nbsp;</span
                      ><span class="best-show-num">21</span></a
                    >
                  </div>
                </div>
              </div>
            </div>
          </div>

          <div class="search-tabs">
            <a href="#" class="active">歌曲</a>
            <a href="#">歌手</a>
            <a href="#">专辑</a>
            <a href="#">歌单</a>
            <a href="#">MV</a>
            <a href="#">歌词</a>
          </div>

          <!-- <div class="tab-content">
            <div class="page-songlist">
              <div class="songlist-header">
                <div class="row">
                  <div></div>
                </div>
              </div>
              <div class="songlist-body"></div>
              <div class="songlist-footer"></div>
            </div>
          </div> -->

          <el-table
            ref="multipleTable"
            :data="tableData"
            tooltip-effect="dark"
            style="width: 100%"
            @selection-change="handleSelectionChange"
          >
            <el-table-column type="selection" width="100"> </el-table-column>
            <el-table-column label="歌曲" width="440">
              <template slot-scope="scope">{{ scope.row.date }}</template>
            </el-table-column>
            <el-table-column prop="name" label="歌手" width="220">
            </el-table-column>
            <el-table-column
              prop="address"
              label="专辑"
              width="220"
              show-overflow-tooltip
            >
            </el-table-column>
          </el-table>
          <div style="margin-top: 20px">
            <el-button @click="toggleSelection([tableData[1], tableData[2]])"
              >切换第二、第三行的选中状态</el-button
            >
            <el-button @click="toggleSelection()">取消选择</el-button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "Search",
};
</script>

<style lang="less" scoped>
.search-container {
  background-image: url("../../assets/images/search/search_bg.jpg");
  background-repeat: no-repeat;
  background-size: 100% 430px;
  .search-header-container {
    min-width: 1000px;
    max-width: 1400px;
    margin: 0 auto;
    height: 70px;
    line-height: 70px;
    justify-content: space-between;
    .search-logo {
      float: left;
    }
    .search-user {
      float: right;
    }
  }

  .search-main-container {
    .search-main-header {
      width: 660px;
      margin: 0 auto;
      padding-top: 117px;
      position: relative;
      .search-main-search {
        height: 50px;
        border-radius: 25px;
        background-color: #fff;
        line-height: 50px;
        padding-right: 88px;
        position: relative;
        padding-left: 25px;
        input {
          line-height: 50px;
          border: 0;
          width: 100%;
          height: 50px;
          vertical-align: top;
        }
        p {
          width: 80px;
          height: 40px;
          line-height: 40px;
          display: block;
          position: absolute;
          right: 5px;
          top: 5px;
          border-radius: 20px;
          font-size: 14px;
          text-align: center;
          color: #fff;
          background-color: #e91e63;
          border: none;
          span {
            display: inline-block;
            height: 40px;
            vertical-align: top;
          }
        }
      }
      .search-main-hot {
        line-height: 34px;
        margin-top: 10px;
        text-align: center;
        span {
          margin-left: 10px;
          color: #b9b9b9;
        }
        a {
          color: #fff;
          margin: 0 7px;
          display: inline-block;
          text-decoration: none;
        }
      }
    }
    .search-main {
      background-color: #fff;
      border-radius: 2px;
      margin-top: 85px;
      padding: 40px 50px;
      box-sizing: border-box;
      box-shadow: 0 0 80px 0 rgba(50, 50, 50, 0.15);
      display: inline-block;
      position: relative;
      left: 50%;
      -ms-transform: translate(-50%, 0);
      transform: translate(-50%, 0);
      .search-result {
        margin: 0 auto;
        min-width: 1000px;
        max-width: 1400px;
        width: 1200px;

        .search-best-show {
          margin-bottom: 40px;
          & > p {
            color: #333;
            font-size: 14px;
            margin-bottom: 20px;
          }

          .best-show-content {
            height: 140px;
            .best-show-mv {
              float: left;
              margin-right: 80px;

              a {
                color: #333;
                text-decoration: none;
                float: left;
                img {
                  display: inline-block;
                  overflow: hidden;
                  width: 220px;
                  height: 140px;
                  border-radius: 8px;
                }
              }

              .best-show-text {
                margin-left: 20px;
                float: left;

                .best-show-name {
                  color: #333;
                  font-size: 20px;
                  margin-bottom: 80px;
                }
                .best-show-desc {
                }
                span {
                  color: #2f74ff;
                  background-color: rgba(47, 116, 255, 0.1);
                  padding: 4px 8px;
                  border-radius: 10px;
                  font-size: 12px;
                  margin: 10px 0;
                }
              }
            }

            .best-show-singer {
              float: left;
              margin-right: 80px;

              .best-show-image {
                display: inline-block;
                float: left;
                width: 140px;
                height: 140px;
                border-radius: 50%;
                overflow: hidden;
                color: #333;
                text-decoration: none;
              }

              .best-show-text {
                margin-left: 20px;
                float: left;

                .best-show-name {
                  display: block;
                  margin-bottom: 45px;
                  margin-top: 22px;
                  a {
                    font-size: 20px;
                    color: #333;
                  }
                }

                .best-show-desc {
                  color: #666;
                  font-size: 14px;
                  a {
                    text-decoration: none;
                    color: #333;
                    text-decoration: none;
                    font-size: 14px;
                  }
                  .best-show-num {
                    color: #e91e63;
                    cursor: pointer;
                    font-size: 14px;
                  }
                }
              }
            }
          }
        }

        .search-tabs {
          line-height: 30px;
          margin-bottom: 20px;
          padding-left: 30px;

          a {
            margin-right: 80px;
            position: relative;
            font-size: 16px;
            padding: 0;
            overflow: hidden;
            color: #333;
            text-decoration: none;
          }
          .active {
            background: 0 0 !important;
            color: #e91e63;
          }
        }
      }
    }
  }

  .el-table::before {
    height: 0;
  }

  // .el-table th.is-leaf {
  //   border-bottom: transparent!important;
  // }
}
</style>